<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-04-02 16:26:43
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-08-06 10:17:59
 * @FilePath: serve.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--  -->
<template>
  <div class="home">
    <van-nav-bar
      title="服务管家"
      fixed
      safe-area-inset-top
      :style="{ background: isTop ? 'transparent' : '#82b4ef' }"
    />
    <div class="tips">
      <van-image
        class="icon"
        :src="require('@/assets/icon/serve/person.png')"
      />
      <div class="text">
        <div class="text_1">您的智能管家</div>
        <div class="text_2">
          <van-image
            class="icon2"
            :src="require('@/assets/icon/serve/chat.png')"
          />
          <span v-if="!list.length"
            >“尊敬的用户，您最近没有待服务的项目哦~”</span
          >
          <span v-if="list.length > 0"
            >“尊敬的用户，您最近有{{ list.length }}服务项目哦~”</span
          >
        </div>
      </div>
    </div>
    <!-- <div class="wapper">
      <div class="card-container">
        <div v-for="item in 3" :key="item" class="card-item"></div>
      </div>
    </div> -->

    <!-- <div class="grid">
      <div class="title">管家推荐服务</div>
      <van-grid :column-num="4" :border="false" square>
        <van-grid-item v-for="(v, i) in options" :key="i" @click="jump(v)">
          <template #text>
            <span class="grid_text">{{ v.name }}</span>
          </template>
          <template #icon>
            <van-image class="grid_icon" :src="v.url" />
          </template>
        </van-grid-item>
      </van-grid>
    </div> -->
    <div class="options">
      <van-grid :column-num="4" square :border="false">
        <van-grid-item
          v-for="(v, i) in options"
          :key="JSON.stringify(v) + i"
          @click="jump(v)"
        >
          <template #text>
            <span class="options_text">
              {{ v.name }}
            </span>
          </template>
          <template #icon>
            <div class="options_icon">
              <van-image width="100%" height="100%" fit="cover" :src="v.url" />
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="list">
      <div class="list_title">我的服务记录</div>
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="list.length > 0 ? '没有更多了' : ''"
        @load="onLoad"
      >
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <serveListitem
          v-for="(v, i) in list"
          :key="JSON.stringify(v) + i"
          :item="v"
        ></serveListitem>
        <van-empty
          v-if="!loading && list.length == 0"
          description="暂无记录，期待您在安心修的第1次养护"
        />
      </van-list>
    </div>
  </div>
</template>

<script>
import serveListitem from "@/components/serve/serveListItem.vue";
import api from "@/api/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "serve",
  components: { serveListitem },
  data() {
    //这里存放数据
    return {
      list: [],
      loading: false,
      finished: false,
      isTop: true,
      options: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      this.getServeList();
    },
    handleScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop < 50) {
        this.isTop = true;
      } else {
        this.isTop = false;
      }
    },
    async getHomeCategory() {
      let params = {
        isTop: "true",
        type: 0,
        keyWords: "",
        parentId: "",
      };
      let res = await api.gethomeCategory(params);
      this.options = res;
    },
    jump(item) {
      this.$router.push({
        path: "/baoyang",
        query: {
          id: item.id,
        },
      });
      // if (item.id == "1923192237742030850") {
      //   this.$router.push({
      //     path: "/baoyang",
      //   });
      // } else if (item.id == "1923197564654911489") {
      //   this.$router.push({
      //     path: "/luntai",
      //   });
      // } else if (item.id == "1923197645038747649") {
      //   this.$router.push({
      //     path: "/washCar",
      //   });
      // } else if (item.id == "1923197703956135937") {
      //   this.$router.push({
      //     path: "/baoyang",
      //     query: {
      //       id: item.id,
      //       title: "美容",
      //     },
      //   });
      // }
    },
    async getServeList() {
      let res = await api.orderList({
        ...this.pageInfo,
        orderStatus: 31,
      });
      if (res.data.length == 0) this.finished = true;
      this.list = [...this.list, ...res.data];
      if (res.data.length < this.pageInfo.pageSize) {
        this.finished = true;
      } else {
        this.pageInfo.pageNum++;
      }
      this.loading = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    this.getHomeCategory();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  }, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg")
    no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-position: top;
  box-sizing: border-box;
  padding: 150px 50px 150px 50px;
  background-color: #fff;
  // position: relative;

  .tips {
    display: flex;
    align-items: center;
    .icon {
      width: 214px;
      height: 214px;
    }
    .text {
      margin-left: 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      &_1 {
        font-size: 56px;
        color: #fff;
        margin-bottom: 35px;
        font-weight: bold;
      }
      &_2 {
        display: flex;
        align-items: center;
        font-size: 38px;
        color: #fff;
        .icon2 {
          width: 60px;
          height: 50px;
          margin-right: 20px;
        }
      }
    }
  }

  .wapper {
    margin-top: 65px;
    overflow-x: auto;
    width: calc(100vw - 100px);
    -webkit-overflow-scrolling: touch;
    // 隐藏滚动条（兼容主流浏览器）
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }
    .card-container {
      display: flex; /* 启用flex布局 */
      flex-wrap: nowrap; /* 禁止换行[4](@ref) */
      .card-item {
        flex: 0 0 500px;
        width: 500px; /* 固定卡片宽度 */
        height: 330px;
        margin-right: 30px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
    }
  }
  // .grid {
  //   margin-top: 60px;
  //   margin-left: -50px;
  //   margin-right: -50px;
  //   padding: 30px 50px 0 50px;
  //   background: #fff;
  //   border-top-left-radius: 30px;
  //   border-top-right-radius: 30px;
  //   .title {
  //     font-size: 56px;
  //     font-weight: bold;
  //     margin-bottom: 20px;
  //   }
  //   .grid_text {
  //     font-size: 40px;
  //     margin-top: 15px;
  //   }
  //   .grid_icon {
  //     width: 130px;
  //     height: 150px;
  //   }
  // }
  .options {
    padding: 55px 0;

    &_text {
      font-size: 44px;
    }

    &_icon {
      min-width: 160px;
      max-width: 160px;
    }
  }

  .list {
    margin-left: -50px;
    margin-right: -50px;
    padding: 30px 50px 0 50px;
    background: #fff;
    &_title {
      font-size: 56px;
      font-weight: bold;
      margin-bottom: 30px;
    }
  }
  /deep/ .van-nav-bar {
    background: transparent;
    .van-nav-bar__title {
      color: #fff;
    }
    .van-icon {
      color: #fff;
    }
    .van-nav-bar__text {
      color: #fff;
    }
  }
  .van-hairline--bottom::after {
    border: unset;
  }
  /deep/ .van-grid-item__content {
    background: transparent;
  }
}
</style>
